import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { UEditorComponent } from 'ngx-ueditor';

@Component({
    selector: 'app-ueditor01',
    templateUrl: './ueditor01.component.html',
    styleUrls: ['./ueditor01.component.scss']
})
export class Ueditor01Component implements OnInit {

    @ViewChild('full') full: UEditorComponent;

    public sign = 'u_editor';

    // 展示api获取到的数据
    public showMessage;

    public full_source;

    // 配置信息
    public ueditor_config = {
        toolbars: [
            [
                'FullScreen', // 全屏
                'bold', // 加粗
                'italic', // 斜体
                'underline', // 下划线
                '|',
                'forecolor',  // 字体颜色
                'backcolor',  // 背景色
                'fontfamily', // 字体
                'fontsize', // 字号
                '|',
                'insertorderedlist',  // 有序列表
                'insertunorderedlist',  // 无序列表
                '|',
                'justifyleft',  // 左对齐
                'justifycenter',  // 居中对齐
                'justifyright', // 右对齐
                'justifyjustify', // 两端对齐
                '|',
                'link', // 超链接
                'unlink', // 取消链接
                'inserttable', // 插入表格
                '|',
                'simpleupload', // 单图上传
            ]
        ],
        autoClearinitialContent: true,  // 自动清除初始内容
        wordCount: true,    // 文字计数
        focus: false,   // 初始化后获得焦点
        initialFrameHeight: 200,    // 设置高度
        initialFrameWidth: '100%',  // 设置宽度
        enableDragUpload: true, // 启用拖放上传
        enablePasteUpload: true,    // 启用粘贴上传
        imageScaleEnable: true, // 启用图片拉伸缩放
        autoHeightEnable: true, // 自动高度
    };
    constructor(private router: Router) {

    }

    ngOnInit() {

    }

    // ueditor 加载完成
    onReady($event) {
        // 字体大小及颜色，通过class设置默认：16px、#000
    }

    // 切换语言触发方法
    languageChange($event, language) {
        this.full.setLanguage(language);
    }

    // 获取全部html内容
    getAllHtml() {
        this.showMessage = this.full.Instance.getAllHtml();
    }

    // 获得文本，带html标签
    getContent() {
        this.showMessage = this.full.Instance.getContent();
        // 设置img标签的垂直对齐为底部对齐
        setTimeout(() => {
            const imgs = document.getElementsByTagName('img');
            for (let i = 0; i < imgs.length; i++) {
                imgs[i].style.verticalAlign = 'initial';
            }
        });
    }

    // 获取纯文本
    getContentTxt() {
        this.showMessage = this.full.Instance.getContentTxt();
    }

    /**
     * 写入/追加内容
     * @param { Object } $event 事件对象
     * @param { boolean } type 是否是追加，true：追加；false，直接更新内容
     */
    setContent($event, type) {
        this.showMessage = type ? '追加文本' : '添加文本';
        this.full.Instance.setContent('<h3>一段文本</h3>', type);
    }

    // 获取带格式的文本
    getPlainTxt() {
        this.showMessage = this.full.Instance.getPlainTxt();
        console.log(this.showMessage);
    }

    // 判断编辑器是否有内容
    hasContents() {
        this.showMessage = this.full.Instance.hasContents() ? '有内容' : '无内容';
    }

    // 编辑器获得焦点
    onfocus() {
        this.full.Instance.focus();
        this.showMessage = '获得焦点';
    }

    // 编辑器失去焦点
    onblur() {
        this.full.Instance.blur();
        this.showMessage = '失去焦点';
    }

    // 编辑器是否有焦点
    isOnFocus() {
        this.showMessage = this.full.Instance.isFocus() ? '有焦点' : '无焦点';
    }

    // 设置当前区域不可编辑
    setDisabled() {
        this.full.Instance.setDisabled();
        this.showMessage = '当前区域不可编辑';
    }

    // 设置当前区域可编辑
    setEnabled() {
        this.full.Instance.setEnabled();
        this.showMessage = '当前区域可编辑';
    }

    // 隐藏编辑器
    setHide() {
        this.full.Instance.setHide();
        this.showMessage = '隐藏编辑器';
    }

    // 显示编辑器
    setShow() {
        this.full.Instance.setShow();
        this.showMessage = '显示编辑器';
    }

    // 获取当前选中文本
    getText() {
        this.showMessage = this.full.Instance.selection.getText();
        console.log(this.full.Instance.selection);
        console.log(this.full.Instance.selection.getText());
    }

    // 在光标出插入内容
    insertContent() {
        this.full.Instance.execCommand('inserthtml', '<span>插入一段文本</span>');
    }

    // 设置高度方法
    setHeight($event) {
        this.full.Instance.setHeight(300);
    }

    // 清空文档
    clearDoc() {
        this.full.Instance.execCommand('cleardoc');
    }

    // 插入图片
    insertImage() {
        this.full.Instance.execCommand('insertimage', {
            src: './../assets/image/a.png',
            width: '100',
            height: '100',
        });
        // 第二个参数：{} / [{},{}]
    }
}